{% extends "base.html" %}
{% block shangpin_add %}
<h1>商品添加</h1>
<button>商品批量上传</button>


<button>分类属性列表</button>

<style>
    .biaoti div{
        text-align: left;
        margin: 5px 10px 5px 10px;
    }
    .select_style select{
        text-align: left;
        margin: 5px 0px 5px 0px;
        font-size: 3px;
        padding: 0px;
    }
    .checkbox div{
        text-align:center;
        padding: 0px
    }
</style>

<form id="add_goods" action="http://127.0.0.1:8000/accept/" method="POST">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#home" data-toggle="tab">基本信息</a>
        </li>
        <li><a href="#ios" data-toggle="tab">库存/规格</a></li>
        <li><a href="#jmeter" data-toggle="tab">参数</a></li>
        <li><a href="#ejb" data-toggle="tab">详情</a></li>
        <li><a href="#dad" data-toggle="tab">轮播图</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane in active" id="home">
            
            <div class="row biaoti">
                <table class="table">
                    <tr>
                        <th>名称</th>
                        <th>商家</th>
                        <th>品牌</th>
                        <th>编号</th>
                        <th>简介</th>
                    </tr>    
                    <tr>
                            <th><input type="text" name="goodsname" placeholder="商品名称"></th>
                            <th><input type="text" name="merchant" placeholder="商家名称"></th>
                            <th><input type="text" name="brand" placeholder="品牌"></th>
                            <th><input type="text" name="numbering" placeholder="商品编号"></th>
                            <th><input type="text" name="brief_introduction" placeholder="商品简介"></th>
                        </tr>         
                </table>
            </div>  
            <div class="row">
                <div class="col-md-4">类别</div>
                <div class="col-md-4">关键字</div>
                <div class="col-md-4">类型</div>
            </div>
            <div class="row">
                <div class="col-md-4 select_style">
                    <!-- <select class="col-md-3 " name="fisrt_class">
                        <option value="一级分类" id="one">一级分类</option>
                        <option value="家用电器" id="two">家用电器</option>
                        <option value="数码通讯" id="three">数码通讯</option>
                        <option value="电脑配件" id="four">电脑配件</option>
                        <option value="竹把首饰" id="six">竹把首饰</option>
                        <option value="啤酒饮料矿泉水">啤酒饮料矿泉水</option>
                    </select> -->
                    <select id="querycourse" class="col-md-3 selectpicker" data-live-search="true"  onchange="getListByOption()" name="fisrt_class">
                        <option data-tokens="ketchup mustard" value="" >一级分类</option>
                    </select>
                
                    <!-- <select class="col-md-3" name="second_class">
                        <option value="二级分类">二级分类</option>
                        <option value="saab">Saab</option>
                        <option value="opel">Opel</option>
                        <option value="audi">Audi</option>
                    </select> -->
                    <select id="queryItem" class="col-md-3 selectpicker" data-live-search="true"   onchange="getListByChildOption()" name="second_class">
                        <option data-tokens="ketchup mustard" value="">二级分类</option>
                    </select>
                            
                    <!-- <select class="col-md-3" name="third_class">
                        <option value="三级分类">三级分类</option>
                        <option value="saab">Saab</option>
                        <option value="opel">Opel</option>
                        <option value="audi">Audi</option>
                    </select> -->
                    <select id="queryChildItem" class="col-md-3 selectpicker" data-live-search="true" name="third_class">
                        <option data-tokens="ketchup mustard" value="">三级分类</option>
                    </select>

                    <div class="col-md-3" style="text-align: left;margin: 5px 0px 5px 0px;font-size: 3px">
                        <a href="">编辑分类</a>
                    </div>
                </div>
                <div class="col-md-4" style="padding:0px">
                    <div style="padding :0px;max-width:900px;margin:auto;text-align:center">
                        <textarea id="hero-demo" name="tagEditor_cont"></textarea>
                    </div>
                </div>
                <div class="col-md-4 checkbox" style="text-align: left;padding: 0px">
                    <div class="col-md-3"><input type="checkbox" name="sb" value="精品">精品</div>
                    <div class="col-md-3"><input type="checkbox" name="sb" value="热销">热销</div>
                    <div class="col-md-3"><input type="checkbox" name="sb" value="普通商品">普通商品</div>
                    <div class="col-md-3"><input type="checkbox" name="sb" value="实体商品">实体商品</div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="ios">
        
            <table class="table">
                <tr>
                    <th>库存</th>
                    <th>库存警告</th>
                    <th>市场价格</th>
                    <th>本店价格</th>
                </tr>
                <tr>
                    <th><input type="number" name="kucun" value="0"></th>
                    <th><input type="number" name="kucun_j" value="0"></th>
                    <th><input type="number" step="0.01" name="maket_price" value="0"></th>
                    <th><input type="number" step="0.01" name="shop_price" value="0"></th>
                </tr>
                <tr>
                    <th>积分价</th>
                    <th>送积分</th>
                    <th>返利</th>
                    <th>运费</th>
                </tr>
                <tr>
                    <th><input type="number" name="jifen" value="0"></th>
                    <th><input type="number" name="jifen_price" value="0"></th>
                    <th><input type="number" step="0.01" name="fanli" value="0"></th>
                    <th><input type="number" step="0.01" name="yunfei" value="0"></th>
                </tr>
            </table>
        </div>
        <div class="tab-pane fade" id="jmeter">
            
            <div class="row insert">
                <div class="col-md-3"><p>参数</p></div>
                <div class="col-md-9"><p>参数值（参数1、2、3）</p></div>
            </div>
            
            <div style="margin: 10px" class="ceshi">
                <button type="button" class="btn btn-default btn-sm addParamsBtn"><span class="glyphicon glyphicon-plus"></span>添加商品分类属性</button>
                
                <button style="margin-left:10px;" type="button" class="btn addParamsBtn2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加自定义参数</button>
            </div>
        </div>
        <div class="tab-pane fade" id="ejb">
            <div><h1>商品详情</h1></div>
            
        </div>      
        <div class="tab-pane fade" id="dad">
            <div><p>轮播图</p></div>
        </div> 
        <!-- <div style="text-align: center"><button class="button">保存</button></div> -->
        <div style="text-align: center" id="submit"> <input type="submit"></div>
       
    </div>
</form>   
{% endblock %}









{% block script %}
    
    <script>

        // jQuery UI autocomplete extension - suggest labels may contain HTML tags

        // github.com/scottgonzalez/jquery-ui-extensions/blob/master/src/autocomplete/jquery.ui.autocomplete.html.js

        var cache = {};

        function googleSuggest(request, response) {

            var term = request.term;

            if (term in cache) { response(cache[term]); return; }

            $.ajax({

                url: 'http://query.yahooapis.com/v1/public/yql',

                dataType: 'JSONP',

                data: { format: 'json', q: 'select * from xml where url="http://google.com/complete/search?output=toolbar&q='+term+'"' },

                success: function(data) {

                    var suggestions = [];

                    try { var results = data.query.results.toplevel.CompleteSuggestion; } catch(e) { var results = []; }

                    $.each(results, function() {

                        try {

                            var s = this.suggestion.data.toLowerCase();

                            suggestions.push({label: s.replace(term, '<b>'+term+'</b>'), value: s});

                        } catch(e){}

                    });

                    cache[term] = suggestions;

                    response(suggestions);
                }
            });

        }

        $(function() {

            $('#hero-demo').tagEditor({

                placeholder: 'Enter tags ...',

                autocomplete: { source: googleSuggest, minLength: 3, delay: 250, html: true, position: { collision: 'flip' } }

            });
        });


    
        $(".addParamsBtn2").click(function (){
            var one_row ='<div class="row create_row" id="def_parameter" name ="yincangbox"><div class="col-md-3" name =""><input type="text" name="canshuname">\
            </div><div class="col-md-8"><input type="text" style="width: 100%;" name ="canshuzhi"><input type="checkbox">可选参数</div>\
            <div class="col-md-1"><button class="button glyphicon glyphicon-remove remove_btn"></button>\
            </div></div>'
            // setTimeout("alert('5 seconds!')",500)
            //  alert("adasdas")
            $(".insert").append(one_row)



            $(".remove_btn").click(function(){
                // alert("erftrxdftcybvghukm")
                $(".create_row").remove();    
            }); 

        });
        $(function () {
            $('#myTab li:eq(0) a').tab('show');
        }); 

//   selecr 三级联动
        var  arr=["C/C++","JAVA","PHP","Javascript",".Net"];   
        $(function() {
            var  $selectParent=$("#querycourse");
            for(var i=0;i<arr.length;i++) {
                    var $option=$("<option>"+arr[i]+"</option>");   
                    $option.val(arr[i]);
                    $selectParent.append($option);
            }
        
        });

        function getListByOption() {
            var $select = $("#queryItem");
            $select.empty();   //置空避免重复加载
            var  $selectChild = $("#queryChildItem");
            $selectChild.empty();
            for(var i = 0; i < 10; i++) {
                    var  name=$("#querycourse").val()+"的第"+i+"课";
                    var $option=$("<option>"+name+"</option>");   
                    $option.appendTo($select);
                    
            }
            getListByChildOption();
        }
    
    
        function getListByChildOption() {
            var  $selectChild = $("#queryChildItem");
                $selectChild.empty();
                
            for(var j=0;j<10;j++){
                    var  nameChild=$("#queryItem").val()+"第"+j+"节";
                    var $optionChild=$("<option>"+ nameChild+"</option>");   
                    $selectChild.append($optionChild);    
                }     
        }

        
    </script>

{% endblock %}


